<template>
  <!--  收藏-->
  <div class="left-Navigation">
    <el-tabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">
      <el-tab-pane label="资源">
        <el-input style="width: 300px;" class="w-50 m-2" placeholder="请输入内容" :prefix-icon="Search" max="15" change=""> </el-input>
        <el-button success>搜索</el-button>
      </el-tab-pane>
      <el-tab-pane label="视频课">
        <el-input style="width: 300px;" class="w-50 m-2" placeholder="请输入内容" :prefix-icon="Search" max="15" change=""> </el-input>
        <el-button success>搜索</el-button>
      </el-tab-pane>
      <el-tab-pane label="线下课">
        <el-input style="width: 300px;" class="w-50 m-2" placeholder="请输入内容" :prefix-icon="Search" max="15" change=""> </el-input>
        <el-button success>搜索</el-button>
      </el-tab-pane>

      <el-tab-pane label="直播课">
        <div style="margin-top: 10px">
          <el-input style="width: 300px;" class="w-50 m-2" placeholder="请输入内容" :prefix-icon="Search" max="15" change=""> </el-input>
          <el-button success>搜索</el-button>
          <div style="float: right">
            <el-button type="danger"  @click="showDelete=0" v-if="showDelete">批量删除</el-button>

            <template v-else>
              <el-button @click="showDelete=1">取消</el-button>
              <el-button>确定</el-button>
              <el-button>全选</el-button>
            </template>
          </div>
        </div>
        <!--          <el-dialog v-model="showDelete"  width="30%" center>-->
        <!--    <span>-->
        <!--      请打开中舞网APP，点击"练习室"-"音频库"中查看。-->
        <!--    </span>-->
        <!--            <template #footer>-->
        <!--      <span class="dialog-footer">-->
        <!--        <el-button type="primary" @click="showDelete = false">-->
        <!--          确定-->
        <!--        </el-button>-->
        <!--      </span>-->
        <!--            </template>-->
        <!--          </el-dialog>-->

      </el-tab-pane>
    </el-tabs>
  </div>

  <div class="wu">
    <p>无更多内容</p>
  </div>
  <hr>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "index",
});
</script>

<script setup lang="ts">
import { ref } from 'vue'

const showDelete = ref(1)
</script>

<style scoped>

.left-Navigation{
  margin: 10px;
}

.el-button{
  margin-left: 20px;
}

.wu{
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 12px;

}

.active{

}
</style>
